<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  </head>
  <body>
    <button>jquery发送get</button>
    <button>jquery发送post</button>
    <button>通用ajax</button>
    <script>
      $('button')
        .eq(0)
        .click(function () {
          //  参数一：地址  参数二：携带的数据 参数三：对响应数据的操作 参数四：响应数据的格式
          $.get(
            'http://127.0.0.1:8080/jquery',
            { name: 'zs', age: 20 },
            (data) => {
              console.log(data)
            },
            'json'
          )
        })

      $('button')
        .eq(1)
        .click(function () {
          //  参数一：地址  参数二：携带的数据 参数三：对响应数据的操作 参数四：响应数据的格式
          $.get('http://127.0.0.1:8080/jquery', { name: 'zs', age: 20 }, (data) => {
            console.log(data)
          })
        })

      // 通用
      $('button')
        .eq(2)
        .click(function () {
          $.ajax({
            url: 'http://127.0.0.1:8080/jquery',
            data: { name: 'zs', age: 20 },
            type: 'get',
            // 设置响应数据格式
            dataType: 'json',
            success: (data) => {
              console.log(data)
            },
            // 设置超过时常，解决方案
            timeout: 3000,
            error: () => {
              console.log('出错啦')
            },
            // 请求头：
            headers: {
              a: 200,
              c: 300
            }
          })
        })
    </script>
  </body>
</html>
